/// <reference path="_variables-shared.scss" />
/// <reference path="_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />

// Common
// ------------------------------

.custom-scrollbar {
    --overflow-x: hidden;
    --overflow-y: auto;
    --scrollbar-size: 14px;
    --scrollbar-track-color: transparent;
    --scrollbar-track-hover-color: rgba(0,0,0, 0.05);
    --scrollbar-thumb-color: rgba(0,0,0, 0.2);
    --scrollbar-thumb-hover-color: rgba(0,0,0, 0.3);
    --scrollbar-thumb-active-color: rgba(0,0,0, 0.4);
    overflow-x: var(--overflow-x, hidden) !important;
    overflow-y: var(--overflow-y, auto) !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
    //background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar:disabled {
    display: none;
}



// Track
// ------------------------------

.custom-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    background-color: var(--scrollbar-track-color);
    border: solid transparent;
    border-width: 0 0 0 4px;
}

.custom-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 4px 0 0;
}

.custom-scrollbar::-webkit-scrollbar-track:hover {
    background-color: var(--scrollbar-track-hover-color);
    -webkit-box-shadow: inset 1px 0 0 rgba(#000, .1);
}

.custom-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    -webkit-box-shadow: inset 0 1px 0 rgba(#000, .1);
}

.custom-scrollbar::-webkit-scrollbar-track:active {
    background-color: var(--scrollbar-track-hover-color);
    -webkit-box-shadow: inset 1px 0 0 rgba(#000, .14), inset -1px 0 0 rgba(#000,.07);
}

.custom-scrollbar::-webkit-scrollbar-track:horizontal:active {
    -webkit-box-shadow: inset 0 1px 0 rgba(#000, .14),inset 0 -1px 0 rgba(#000, .07);
}


.custom-scrollbar::-webkit-scrollbar-track-piece {
}


// Thumb
// ------------------------------

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    background-clip: padding-box;
    border: 1px solid transparent;
    border-left-width: 6px;
    min-height: 28px;
    padding: 100px 0 0;
    -webkit-box-shadow: inset 1px 1px 0 rgba(#000,.1), inset 0 -1px 0 rgba(#000, .07);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
    -webkit-box-shadow: inset 1px 1px 1px rgba(#000, .25);
}
.custom-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-thumb-active-color);
    -webkit-box-shadow: inset 1px 1px 1px rgba(#000, .35);
}

.custom-scrollbar::-webkit-scrollbar-button,
.custom-scrollbar::-webkit-scrollbar-corner {
    cursor: pointer;
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

.custom-scrollbar::-webkit-scrollbar-corner {
}


// Overlaying scrollbar
// ------------------------------

.wkit .custom-scrollbar.custom-scrollbar-overlay {
    --overflow-x: overlay;
    --overflow-y: overlay;
}

.custom-scrollbar.custom-scrollbar-overlay::-webkit-scrollbar {
    display: none;
}

.custom-scrollbar.custom-scrollbar-overlay:hover::-webkit-scrollbar {
    display: block;
}